<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 60%;"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="角色名称">
        <template slot-scope="scope">
          {{ scope.row.roleName }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" round @click="handleUpdate(row)">
            权限分配
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <auth-list ref="authList" :role="role" :closeDialog="closeDialog"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">
          取消
        </el-button>
        <el-button type="primary" @click="saveAuths()">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/role'
import AuthList from './auth-rolelist'

export default {
  name: 'RoleList',
  components: {
    AuthList
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      role: {}
    }
  },
  computed: {
    dialogTitle: function() {
      return '权限分配 / ' + this.role.roleName
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(result => {
        this.list = result.list
        this.listLoading = false
      })
    },
    handleUpdate(row) {
      this.dialogFormVisible = true
      this.role = Object.assign({}, row) // copy obj
    },
    saveAuths() {
      this.$refs.authList.saveAuths()
    },
    closeDialog() {
      this.$refs.authList.resetChecked()
      this.dialogFormVisible = false
    }
  }
}
</script>
